<form [formGroup]="advancedSettingForm">
  <!-- 不是 checkbox 类型的组件 -->
  <ng-container *ngFor="let metaGroup of metasGroupByName | keyvalue" class="m--margin-bottom-20">
    <div class="mb-1 m--font-bolder m--margin-bottom-10">{{metaGroup.key}}</div>
    <div *ngFor="let meta of metaGroup.value" class="row align-items-center">
      <ng-container [ngSwitch]="meta.controlType">
        <ng-container *ngSwitchCase="'dropdown'">
          <div class="label">
            <label [attr.for]="meta.key">{{meta.label}}：</label>
          </div>
          <mat-form-field>
            <mat-select [formControlName]="meta.key" [value]="meta.value">
              <mat-option *ngFor="let opt of meta.options" [value]="opt.value">{{opt.text}}</mat-option>
            </mat-select>
          </mat-form-field>
          <div class="ml-3" *ngIf="meta.tips">
            <i class="material-icons" [attr.alt]="meta.tips" [attr.title]="meta.tips">error_outline</i>
          </div>
        </ng-container>
      </ng-container>
    </div>
  </ng-container>

  <!-- checkbox 类型的组件 -->
  <div class="mb-1 m--font-bolder m--margin-bottom-10 group-tips">
    <span class="mr-2">{{metasGroupByName_checkbox[0].group_name}}</span>
    <i class="material-icons" [attr.alt]="checkboxTips" [attr.title]="checkboxTips">error_outline</i>
  </div>

  <ng-container *ngFor="let meta of metasGroupByName_checkbox">
    <mat-checkbox [value]="meta.value" [formControlName]="meta.key" class="mr-2">
      {{meta.label}}
    </mat-checkbox>
  </ng-container>
</form>
